<template>
	<view class="margin-top-sm bg-white padding search" style="height:calc(100vh - 20rpx)">
		<view class="text-xl padding-bottom text-bold">筛选</view>
		<view class="bg-gray flex padding-tb justify-center align-center radius padding-left">
			<view class="flex-sub">起止时间</view>
			<view class="flex-treble">
				<uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至"  :border="false">
					<view class="text-right padding-right">{{startDate}}至{{endDate}}</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="margin-top text-right">
			<button class="cu-btn margin-right-sm" :class="selectedDay==item.value?'bg-blue':'bg-gray'" @tap="chooseDay(item.value)" v-for="item in dayList">{{item.label}}</button>
			
		</view>
		<view class="search-btns">
			<button class="cu-btn bg-cancel">重置</button>
			<button class="cu-btn bg-blue">确定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dayList:[
					{label:'7天',value:7},
					{label:'30天',value:30},
				],
				selectedDay:7,
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				startDate:this.getDate(Date.now() - 5 * 24 * 3600000),
				endDate:this.getDate(Date.now() + 5 * 24 * 3600000)
			}
		},
		watch: {
			dateRange() {
				console.log('日期范围选:', this.dateRange);
			}
		},
		methods:{
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			getDate(date, addZero = true){
				console.log(Date.now())
			  date = new Date(date)
			  const year = date.getFullYear()
			  const month = date.getMonth()+1
			  const day = date.getDate()
			  return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			chooseDay(selectedDay){
				console.log(selectedDay)
				this.selectedDay=selectedDay
				console.log(this.selectedDay)
				let startTime = this.getDate(Date.now()-selectedDay*24*3600000)
				console.log(startTime)
				console.log(this.getDate(Date.now()))
				this.dateRange=[startTime,this.getDate(Date.now())]
				this.startDate=startTime
				this.endDate=this.getDate(Date.now())
			}
		}
	}
</script>

<style lang="scss">
	
	.search .uni-date-x{
		background: none;
		text-align: right;
	}
	.search-btns{
		position:fixed;
		bottom:50rpx;
		left:40rpx;
		display: flex;
		button{
			width:314rpx;
			height:90rpx;
		}
		.bg-cancel{
			background:#BFD7EF;
			color:#303C52;
			margin-right:40rpx;
		}
	}
</style>